<template>
    <!-- components/alert/index.wxml -->
    <view :class="'alert ' + (show ? 'modal-show' : 'modal-hide')">
        <view :class="'alert-container alert-container--' + position">
            <slot></slot>
        </view>
    </view>
</template>

<script>
// components/alert/index.js
export default {
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        show: Boolean,
        position: {
            // 位置，默认居中，可选top
            type: String,
            default: 'center'
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {}
};
</script>
<style lang="scss" scoped>
/* components/alert/index.wxss */
.alert {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(100%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 14;
}
.alert.modal-show {
    transition: transform 0s, opacity 0.3s;
    transform: translateY(0);
    opacity: 1;
}
.alert.modal-hide {
    transition: transform 0s 0.3s, opacity 0.3s;
}
.alert-container {
    width: 80%;
    border-radius: 20rpx;
    position: absolute;
}
.alert-container--center {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.alert-container--top {
    top: 20%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
</style>
